<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="avatar margin-top-lg">
				<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="logoimg" mode="widthFix"></image>
				<image v-if="!avatar" @click="handleToAvatar" src="@/static/images/user.webp" class="logoimg"
					mode="widthFix"></image>
			</view>
			<view v-if="!name" @click="handleToLogin" class="padding text-center margin-top-lg">
				<text class="text-lg text-grey">未登录，点击登录</text>
			</view>

			<view class="padding" v-if="name">
				<view class="text-center" @click="handleToInfo" v-model="user">
					<!-- <text class="text-xxl text-grey">Hello， {{nickName}}</text> -->
					<text class="text-xxl text-grey">Hello，{{user.nickName}}</text>
				</view>
				<view class="text-center padding">
					<text class="text-xl text-gray">欢迎回来，感谢使用！</text>
				</view>
			</view>
			<view class="profile-rule padding text-center bg-gradual-blue">
				<text class="text-xxl">{{title}}</text>
			</view>

		</view>
		<!--  -->
		<view class="bg-white">
			<view class="bg-gradual-blue" style="height: 80rpx;line-height: 80rpx;">
				<view style="text-align: center;">
					<uni-row>
						<uni-col :span="12">
							<view style="font-size: 30rpx;">发布的领养 {{adoptionTotal}}</view>
						</uni-col>
						<uni-col :span="12">
							<view style="font-size: 30rpx;">发布的寻宠 {{seekTotal}}</view>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<!-- <view class="margin">
				<uni-grid :column="4" :show-border="false">
					<uni-grid-item>
						<view class="padding text-center margin-top-lg">
							<view class="" @click="handleToEditInfo">
								<view class="text-center">
									<uni-icons type="wallet-filled" size="35"></uni-icons>
								</view>
								<text class="text-center">个人中心</text>
							</view>
						</view>
					</uni-grid-item>


					<uni-grid-item>
						<view class="padding text-center margin-top-lg">
							<view class="" @click="handleToEditInfo">
								<view class="text-center">
									<uni-icons type="person-filled" size="35"></uni-icons>
								</view>
								<text class="text-center">个人资料</text>
							</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="padding text-center margin-top-lg">
							<view class="" @click="handleToEditPassword">
								<view class="text-center">
									<uni-icons type="locked-filled" size="35"></uni-icons>
								</view>
								<text class="text-center">修改密码</text>
							</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="padding text-center margin-top-lg">
							<view class="" @click="handleToSetting">
								<view class="text-center">
									<uni-icons type="gear-filled" size="35"></uni-icons>
								</view>
								<text class="text-center">设置</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view> -->
		</view>

		<!-- 退出按钮 -->
		<!-- <view class="padding bg-white" v-show="name">
			<uni-grid :column="2" :show-border="false">
				<uni-grid-item style="height: 150rpx;">
					<view class="padding">
						<button class="bg-white text-black">
							<uni-icons type="phone-filled"></uni-icons>
							<text class="text-sm">联系我们</text>
						</button>
					</view>
				</uni-grid-item>
				<uni-grid-item style="height: 150rpx;">
					<view class="padding">
						<button class="bg-red" @click="handleLogout">
							<uni-icons type="closeempty" color="#fff"></uni-icons>
							<text class="text-sm">退出登录</text>
						</button>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view> -->

	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		getUserProfile
	} from "@/api/system/user"

	export default {
		data() {
			return {
				title: getApp().globalData.config.appInfo.name,
				name: this.$store.state.user.name,
				nickName: this.$store.state.user.nickName,
				// version: getApp().globalData.config.appInfo.version
				user: {
					nickName: ''
				},
				adoptionTotal: 2,
				seekTotal: 2
			}
		},
		onLoad() {

		},
		onShow() {

		},
		created() {
			// this.nickName = this.$store.state.user.nickName
			// console.log(this.$store.state.user.nickName)
			this.getUserInfo()
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},

			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},

		methods: {
			getUserInfo() {
				getUserProfile().then(response => {
					this.user = response.data
				})
			},
			// 个人信息
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/info')
				console.log("个人信息")
			},
			// 编辑个人资料
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			// 修改密码
			handleToEditPassword() {
				this.$tab.navigateTo('/pages/mine/password/password')
			},
			// 设置
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/setting')
			},
			// 登录页面
			handleToLogin() {
				this.$tab.reLaunch('/pages/login/login')
			},
			//头像
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/avatar')
			},
			//退出
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
			handleJiaoLiuQun() {
				this.$modal.showToast('QQ群：①133713780、②146013835')
			},
			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>

<style lang="scss">
	// page {
	//   background-color: #f1f1f1;
	// }
	.menu {
		height: 100rpx;
		line-height: 100rpx;
		// border-bottom: 1px solid #55aaff;
	}

	.profile-rule {
		height: 140rpx;
		line-height: 140rpx;
		padding: 0px 40rpx;
		// background-color:#000;
		// background-color: #1494dc;
		border-radius: 50% 50% 0 0;
		// box-shadow: 1px 16px 26px rgba(0, 0, 0, .8);

	}

	.avatar {
		//    margin-left: 25%;
		//    margin-right: 40%;
		// margin-top: 10%;
		display: flex;
		/*盒子模型*/
		flex-direction: row;
		/*横向*/
		justify-content: space-around;
		/*主轴居中*/
		// align-items: center;
		/*纵轴居中*/

	}

	.logoimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		// background: #000;
		// border: 1px solid #fff;
		border-width: 5px 5px 5px 5px;
		box-shadow: 1px 1px 5px #333;
		-webkit-box-shadow: 1px 1px 5px #333;
		-moz-box-shadow: 1px 1px 5px #333;
		background-color: #1494dc;
	}

	.mine-container {
		width: 100%;
		height: 100%;

		// background-color: #F5F6F7;
		.header-section {
			padding: 15px 15px 0px 15px;
			// background-color: #F5F6F7;
			color: white;
		}
	}
</style>